<template>
  <flex-root :index="0" :width="500" :height="500">
    <flex-node v-for="i in count" :index="32" :width="width" :height="height" />
    <!-- <flex-node :index="1" :width="100" :height="100">
      <flex-node :index="2" :width="50" :height="50" />
      <flex-node :index="3" :width="50" :height="50" />
    </flex-node> -->

    <!-- <flex-node :index="4" :width="100" :height="100">
     
    </flex-node>
    <flex-node :index="4" :width="100" :height="100"> </flex-node> -->
  </flex-root>
  <div class="add">
    <button @click="add">add</button>
    <button @click="decrease">decrease</button>
    <button @click="setWidth">setWidth</button>
    <button @click="setHeight">setHeight</button>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { FlexNode, FlexRoot } from "@/components/index.ts";
const count = ref(0);
const width = ref(50);
const height = ref(50);
// 节点属性变化
const setWidth = () => {
  // 生成 30-50 的随机数
  width.value = Math.floor(Math.random() * (50 - 30 + 1)) + 30;
};
const setHeight = () => {
  // 生成 30-50 的随机数
  height.value = Math.floor(Math.random() * (50 - 30 + 1)) + 30;
};
// 新增减少节点
const add = () => {
  count.value++;
};
const decrease = () => {
  if (count.value <= 0) return;
  count.value--;
};
</script>
<style>
.add {
  position: fixed;
  right: 0;
  top: 0;
}
.decrease {
  position: fixed;
  right: 0;
  top: 20px;
}
</style>
